<template>
  <div class="sub-popup">
     <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @input="onInput"
        @cancel="onCancel"
        @clear="onClear"
    />
    <down-list v-if="blockShow === 1"></down-list>
    <history-hot :historyhotarr="historyHotArr" :hotarr="hotArr" v-else-if="blockShow === 2"></history-hot>
    <product v-else></product>
  </div>
</template>

<script>
/*
    唯一会出现Product区块的情况：执行搜索的时候
    历史区块的出现情况：
        1、刚进popup时，要显示HistoryHot
        2、只要搜索框中没有文字，就显示HistoryHot
    出现下拉列表区块的情况：只要当前正在输入中，就应该出现DownList
*/ 
import DownList from './DownList'
import HistoryHot from './HistoryHot'
import Product from './Product'

// 数据请求接口
import {GetPopupData} from '@/request/api'
export default {
    data(){
        return {
            value:"",
            blockShow:2, // 1代表DownList 2代表HistoryHot
            historyHotArr:[], // 历史记录数据
            hotArr:[], // 热门搜索
        }
    },
    components:{
        DownList,
        HistoryHot,
        Product
    },
    // 监听输入框输入内容时
    watch:{
        value(val){
            if(val == ""){
               // 显示HistoryHot区块
               this.blockShow = 2; 
            }
        }
    },
    methods:{
        // 执行搜索命令
        onSearch(){
            // 显示Product区块
            this.blockShow = 3;
        },

        onCancel(){
            // 显示HistoryHot区块
            this.blockShow = 2;
            // 调用mutations中的方法来改变state下的iptVal
            this.$store.commit("controlPopupShow",false);
        },
        // 输入时
        onInput(){
            // 显示DownList区块
            this.blockShow = 1;
        },
        // 清除文字时
        onClear(){
            // 显示HistoryHot区块
            this.blockShow = 2;
        }

    },
    created(){
        GetPopupData()
        .then(res=>{
            if(res.errno == 0){
                console.log(res);
                this.value = res.data.defaultKeyword.keyword;
                this.historyHotArr = res.data.historyKeywordList
                this.hotArr = res.data.hotKeywordList
            }
        })
    }
}
</script>

<style>

</style>